<template>
  <div class="demo-container">
    <!-- <el-row>
      <el-button type="primary" @click="todemo">主要按钮</el-button>
      <el-button type="success" @click="dosome">成功按钮</el-button>
      <el-button type="info" @click="sendMessageToApp">信息按钮</el-button>
    </el-row> -->

    <div id="viewer"></div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '',
      meta: [
        {
          name: "",
          content: "",
        }
      ],
      script: [
        {
          type: 'text/javascript',
          src: 'https://res.wx.qq.com/open/js/jweixin-1.4.0.js',
          body: true //<script>是否在body中
        },
        {
          type: 'text/javascript',
          src: 'https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js',
          body: true //<script>是否在body中
        },
      ]
    }
  },
  data() {
    return {
      i: 0,
      uniActive: false,
      viewer: "",
      markersPlugin: "",
      itemArr: [
        {
          name: "house1",
          // img: require('@/assets/imgs/demo/demo1.jpeg'),
          img: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ebbea0343bf44d2aabab3dc58aa4c3a~tplv-k3u1fbpfcp-watermark.awebp",
        },
        {
          name: "house2",
          img: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6df92ba39aa94aec889582df60d3d0d0~tplv-k3u1fbpfcp-watermark.awebp",
        },
        {
          name: "house3",
          img: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40135df7df034eb5a76daa76f26fe046~tplv-k3u1fbpfcp-watermark.awebp",
        },
      ],
      currentDataMark: [],
      // 数据配置，每个图片中存在几个可点击的标记，tooltip对应的是图片名称
      dataMark: {
        house0: [
          {
            // 自定义样式的标记
            id: "circle0",
            longitude: 1.5,
            latitude: -0.28,
            html: "<b>house1</b> &hearts;", // 显示内容
            anchor: "center center",
            scale: [0.5, 1.5],
            style: {
              // maxWidth: "100px",
              color: "white",
              fontSize: "20px",
              fontFamily: "Helvetica, sans-serif",
              textAlign: "center",
            },
            note: 1,
          },
          {
            id: "circle1",
            tooltip: "house2",
            circle: 31,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: -1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 2,
          },
        ],
        house1: [
          {
            id: "circle0",
            tooltip: "house2",
            circle: 30,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: 1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 2,
          },
          {
            id: "circle1",
            tooltip: "house3",
            circle: 31,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: -1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 3,
          },
        ],
        house2: [
          {
            id: "circle0",
            tooltip: "house0",
            circle: 30,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: 1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 0,
          },
        ],
        house3: [
          {
            id: "circle0",
            tooltip: "house1",
            circle: 30,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: 1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 1,
          },
        ],
      },
    };
  },
  mounted() {
    //默认显示第一张照片
    console.log('接收参数')
    console.log('data1', this.$route.query.data1)
    console.log('data2', this.$route.query.data2)
    console.log('this.$route.query', this.$route.query)
    this.currentDataMark = this.dataMark.house0;
    this.setViewer(this.itemArr[0].img);
    let that = this
    document.addEventListener('UniAppJSBridgeReady', function () {
      that.uniActive = true
      alert('UniAppJSBridgeReady激活:' + that.uniActive)
      // this.sendMessageToApp({ name: "zhangsan", age: 22, i: this.i })
    })
  },
  methods: {
    sendMessageToApp() {
      alert(this.uniActive)
      if (!this.uniActive) { return false }
      alert('发送参数')
      uni.postMessage({
        data: {
          param: { name: "zhangsan", age: 22, i: this.i }// 这是传的参数
        }
      });
    },
    dosome() {
      console.log('dosome')
    },
    todemo() {
      this.$router.push({ path: '/demo/' });
    },
    setViewer(panorama) {
      if (this.viewer)
        try {
          this.viewer.destroy();
        } catch (e) {
          console.log(e);
          const viewer = document.querySelector("#viewer");
          viewer.removeChild(viewer.childNodes[0]);
        }
      this.viewer = new Viewer({
        container: document.querySelector("#viewer"),
        panorama: panorama,
        size: {
          width: "100vw",
          height: "100vh",
        },
        plugins: [
          [
            MarkersPlugin,
            {
              markers: this.currentDataMark,
            },
          ],
        ],
        navbar: [
          {
            hidden: false,
          },
        ],
      });
      this.viewer.once("ready", () => {
        //自动旋转
        this.viewer.startAutorotate();
      });
      this.markersPlugin = this.viewer.getPlugin(MarkersPlugin);
      this.markersPlugin.on("select-marker", (e, marker) => {
        // 判断数据中的note字段选择要进入的场景图片
        if (e.args[0].config.note) {
          let index = e.args[0].config.note;
          let indexName = "house" + index;
          this.currentDataMark = this.dataMark[indexName];
          this.setViewer(this.itemArr[e.args[0].config.note].img);
        }
      });
    },
  },
  beforeDestroy() {
    document.removeEventListener('UniAppJSBridgeReady')
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.demo-container {
  position: relative;
  min-width: 100%;
  margin: 0 auto;

  #viewer {
    margin: 0 auto;
  }
}
</style>
